<template>
  <div class="addAssess page flex-col">
    <div class="content bg-white">
      <div class="goods-info box flex-row">
        <div class="left justify-center items-center">
          <img
            :src="info.coverUrl | changeUrl"
            alt=""
            class="img"
            mode="aspectFit"
          />
        </div>
        <div class="right flex-col">
          <span class="title ellipsis_1">{{ info.goodsName }}</span>
          <span class="text">套餐：{{ info.specName }}</span>
        </div>
      </div>
    </div>
    <div class="info flex-col">
      <div class="header flex">
        <span>归还地址</span>
      </div>
      <div class="infomain">
        <div class="scope-item items-center">
          <span class="name">收件人：</span>
          <div class="scope-count">
            {{ returnAddress.receiver || "晟牛优租" }}
          </div>
        </div>
        <div class="scope-item items-center">
          <span class="name">联系电话：</span>
          <div class="scope-count">
            {{ returnAddress.telephone || "13625469875" }}
          </div>
        </div>
        <div class="scope-item flex">
          <span class="name">收件地址：</span>
          <div class="scope-count word">
            {{ returnAddress.province || "" }}{{ returnAddress.city || ""
            }}{{ returnAddress.area || ""
            }}{{
              returnAddress.address || ""
            }}广东省广州市天河区华观路天虹科技园 华观路天虹科技园
          </div>
        </div>
      </div>
    </div>
    <div class="express">
      <div class="header">
        <span>填写快递信息</span>
      </div>
      <!-- <u-form :model="form" ref="uForm">
        <u-form-item label="快递公司：" prop="company" labelWidth="100">
          <u-input v-model="form.company" />
        </u-form-item>
        <u-form-item label="快递单号：" prop="trackingNumber" labelWidth="100">
          <u-input v-model="form.trackingNumber" />
        </u-form-item>
      </u-form> -->
      <div class="input-item line">
        <span class="name">快递公司：</span>
        <div class="scope-count">
          <input
            type="text"
            class="input-box"
            v-model.trim="company"
            placeholder="填写快递公司"
          />
        </div>
      </div>
      <div class="input-item">
        <span class="name">快递单号：</span>
        <div class="scope-count">
          <input
            type="text"
            class="input-box"
            v-model.trim="trackingNumber"
            placeholder="输入快递单号"
          />
        </div>
      </div>
    </div>
    <view class="orderBo"
      ><span class="star">*</span>贵重物品建议邮寄顺丰快递</view
    >

    <div ref="btnok" class="btn" @tap="saveData">确定提交</div>
    <u-toast ref="uToast"></u-toast>
  </div>
</template>

<script>
import { getorderGui } from "../../config/api";
// import OrderAction from '@utils/order'
export default {
  data() {
    return {
      id: "",
      info: {},
      returnAddress: {},
      trackingNumber: "",
      company: "",
      form: {
        trackingNumber: "",
        company: "",
      },
      rules: {
        company: [
          {
            required: true,
            message: "请输入快递公司",
            trigger: ["blur", "change"],
          },
        ],
        trackingNumber: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    // const { id } = this.$query();
    // if (id) {
    //   this.id = id;
    // }
    this.getData();
  },
  methods: {
    async getData() {
      // this.$api.getOrderDetail(this.id || OrderAction.getId()).then((data) => {
      //   this.info = data;
      //   this.returnAddress = data.returnAddress;
      // });
      const res = await getorderGui({
        orderId: 49853,
        sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
      });
      console.log(res, "44");
      this.info = res.data.orderDetailDTO;
    },
    saveData() {
      // if (!this.company.length) {
      //   return this.$refs.uToast.show("请输入快递公司名称");
      // }
      // if (!this.trackingNumber.length) {
      //   return this.$refs.uToast.show("请输入快递单号");
      // }
      if (!this.company.length && !this.trackingNumber.length) {
        console.log(this.$refs.btnok, "pppww");
        // this.$refs.btnok.style.backgroundColor = "#157AFE";
        console.log("ppppp");
      }
      const params = {
        logisticsCompany: this.company,
        orderId: this.id || OrderAction.getId(),
        trackingNumber: this.trackingNumber,
      };
      this.$http
        .request({
          url: "/order/submitOrderReturnInfo.json",
          data: params,
        })
        .then(() => {
          this.$toast("提交成功", "success");
          setTimeout(() => {
            this.$back();
          }, 1500);
        });
    },
  },
};
</script>
<style lang="scss">
.addAssess {
  background-color: #f5f5f5;
  padding: 12px;
  .content {
    width: 100%;
    min-height: 106px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    padding: 12px;
    display: flex;
    .left {
      width: 82px;
      height: 82px;
      margin-right: 12px;
      // background: #f9f9f9;
      border-radius: 5px;
      .img {
        width: 82px;
        height: 82px;
      }
    }
    .right {
      flex: 1;
      color: #3d3d3d;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .title {
        font-family: PingFang SC Bold;
        font-size: 14px;
        line-height: 18px;
      }
      .text {
        width: 80%;
        font-family: PingFang SC Medium;
        color: #9d9d99;
        font-size: 14px;
        line-height: 18px;
        // margin-top: 6px;
        &:first-child {
          margin-top: 17px;
        }
      }
    }
  }
  .info {
    width: 100%;
    min-height: 140px;
    margin-top: 12px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    color: #3d3d3d;
    .header {
      min-height: 30px;
      line-height: 30px;
      font-size: 15px;
      font-family: PingFang SC Heavy;
      // border-bottom: 1px solid #f5f5f5;
    }
    .infomain {
      min-height: 100px;
      .scope-item {
        height: 27px;
        font-size: 14px;
        line-height: 20px;
        box-sizing: content-box;
        .name {
          width: 25%;
          color: #9d9d99;
          font-family: PingFang SC Medium;
        }
        .scope-count {
          font-family: PingFang SC Bold;
        }
        .word {
          width: 75%;
          // padding-right: 75px;
        }
      }
      .input-item {
        font-size: 14px;
        color: #9d9d99;
        font-family: PingFang SC Medium;
        height: 40px;
        border-bottom: 1px solid #f5f5f5;
        // display: flex;
        // justify-content: space-between;
        .scope-count {
          width: 25%;
          height: 100%;
          .input-box {
            width: 100%;
            text-align: right;
          }
        }
        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
  .express {
    width: 100%;
    min-height: 140px;
    margin-top: 12px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    color: #3d3d3d;
    .header {
      min-height: 30px;
      line-height: 30px;
      color: #3d3d3d;
      font-family: PingFang SC Heavy;
      font-size: 15px;
    }
    .input-item {
      width: 100%;
      height: 42px;
      line-height: 42px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.line {
        border-bottom: 1px solid #e4e4e4;
      }
      .scope-count {
        .input-box {
          vertical-align: middle;
          text-align: right;
        }
      }
      .u-form-item {
        ::v-deep .u-input {
          border: none;
        }
      }
    }
  }
  .orderBo {
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: #3d3d3d;
    padding-left: 15px;
    font-family: PingFang SC Medium;
    .star {
      color: #eb0a0a;
    }
  }

  .btn {
    width: 350px;
    height: 48px;
    // background: #0096ff;
    background-color: #cececc;
    opacity: 1;
    border-radius: 24px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    color: #ffffff;
    margin: 20px auto 0;
    position: fixed;
    bottom: 50px;
    // left: 15px;
  }
}
</style>
